<template>
    <div class="table-operator">
        <a-button type="primary" @click="handleAdd">
            <template #icon>
                <PlusOutlined />
            </template>
            新建
        </a-button>
        <a-button type="primary" @click="getDataList">
            <template #icon>
                <UndoOutlined />
            </template>
            刷新
        </a-button>
        <a-button type="primary" :disabled="idList.length <= 0" @click="handleDel">
            <template #icon>
                <DeleteOutlined />
            </template>
            删除
        </a-button>
        <a-button type="primary" @click="handleEdit">
            <template #icon>
                <EditOutlined />
            </template>
            编辑
        </a-button>
        <a-button type="primary" @click="()=> visible = true">
            <template #icon>
                <ArrowUpOutlined />
            </template>
            导入
        </a-button>
        <a-button type="primary" @click="handleExport">
            <template #icon>
                <ArrowDownOutlined />
            </template>
            导出
        </a-button>
        <a-tooltip placement="top">
            <template #title>
                <span>表格项</span>
            </template>
            <a-button type="primary" @click="handleIsTable">
                <template #icon>
                    <AppstoreOutlined />
                </template>
            </a-button>
        </a-tooltip>
        <a-input class="custom-search-input" type="text" v-model:value="search.Keyword" placeholder="关键字" />
        <a-button type="primary" @click="handleSearch">
            <template #icon>
                <SearchOutlined />
            </template>
            查询
        </a-button>
        <a-button type="primary" @click="handleIsOpen">
            <template #icon>
                <SearchOutlined />
            </template>
            高级查询
        </a-button>
        <div class="advanced-search-box" v-show="isOpenSearch">
            <a-form ref="formRef" layout="inline" :model="form">
                <a-col v-for="(item,index) in searchList" :key="index">
                    <a-form-item v-if="item.e_type == 'select'" :label="item.title" :name="item.key">
                        <a-select v-model:value="form[item.key]" style="width: 200px" :placeholder="item.title"
                                  :options="item.bind.data" />
                    </a-form-item>
                    <a-form-item v-if="item.e_type == 'selectList'" :label="item.title" :name="item.key">
                        <a-select v-model:value="form[item.key]" mode="multiple" style="width: 100%" :placeholder="item.title"
                                  :options="item.bind.data" />
                    </a-form-item>
                    <a-form-item v-if="item.e_type == 'number'" :label="item.title" :name="item.key">
                        <a-input-number style="width:100%" v-model:value="form[item.key]" :placeholder="item.title" allow-clear />
                    </a-form-item>
                    <a-form-item v-if="item.e_type == 'radio'" :label="item.title" :name="item.key">
                        <a-radio-group v-model:value="form[item.key]">
                            <a-radio v-for="rad in item.bind.data" :key="rad" :value="rad.value">{{ rad.key }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item v-if="item.e_type == 'textarea'" :label="item.title" :name="item.key">
                        <a-input v-model:value="form[item.key]" :placeholder="item.title" allow-clear />
                    </a-form-item>
                    <a-form-item v-if="item.e_type == 'date'" :label="item.title" :name="item.key">
                        <a-date-picker v-model:value="form[item.key]" :placeholder="item.title" />
                    </a-form-item>
                    <a-form-item v-if="item.e_type == 'text' || item.e_type == 'input'" :label="item.title" :name="item.key">
                        <a-input v-model:value="form[item.key]" :placeholder="item.title" allow-clear />
                    </a-form-item>
                </a-col>
                <a-form-item>
                    <a-button type="primary" @click="handleSearch">
                        <template #icon>
                            <SearchOutlined />
                        </template>
                        查询
                    </a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="handleReset">
                        <template #icon>
                            <Loading3QuartersOutlined />
                        </template>
                        重置
                    </a-button>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="handleIsOpen">
                        <template #icon>
                            <CloseCircleOutlined />
                        </template>
                        关闭
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
    <edit-form ref="editForm" :getDataList="getDataList" />
    <table-sett ref="tableSett" v-bind="$attrs" />

    <!-- 导入 -->
    <a-modal v-model:visible="visible" title="导入文件" @ok="()=> visible = false">
        <upload-dragger action="/%areaName%/%entityName%/ImportToExcel" :visible="visible" />
    </a-modal>
</template>

<script setup>
    import { ref, nextTick, createVNode } from "vue";
    import {
        PlusOutlined,
        EditOutlined,
        DeleteOutlined,
        ArrowUpOutlined,
        ArrowDownOutlined,
        AppstoreOutlined,
        SearchOutlined,
        Loading3QuartersOutlined,
        CloseCircleOutlined, ExclamationCircleOutlined,
    } from '@ant-design/icons-vue'
    import { message, Modal } from "ant-design-vue";
    import moment from 'moment'
    import { http } from "@/axios/index.js";
    import UploadDragger from '@/components/UploadDrager/index.vue'
    import EditForm from './EditForm.vue';
    import TableSett from './TableSett.vue'
    import { searchList, sorter } from "../ranks.js";

    const url = import.meta.env.VITE_APP_PublishRootUrl
    const props = defineProps({
        getDataList: {
            type: Function,
            default: () => {
            },
            required: true
        }
    })
    const visible = ref(false)
    let isOpenSearch = ref(false)
    let form = ref({})
    let idList = ref([])
    const search = ref({ Keyword: "", Condition: searchList.value.length > 0 ? searchList.value[0].key || '' : '' })
    const formRef = ref()
    const delItem = (data, params) => {
        idList.value = data
        if (params) {
            handleDel()
        }
    }
    defineExpose({ delItem })
    const editForm = ref()
    const handleAdd = () => {
        editForm.value.openForm()
    }
    const handleDel = () => {

        if (idList.value.length == 0) {
            message.warning("至少勾选一项")
            return
        }
        Modal.confirm({
            title: '提示',
            icon: createVNode(ExclamationCircleOutlined),
            content: '确认删除吗',
            okText: '确认删除',
            cancelText: '取消',
            onOk: async () => {
                try {
                    const {
                        Success,
                        Msg
                    } = await http.post("/%areaName%/%entityName%/DeleteData", idList.value)
                    if (Success) {
                        message.success("操作成功")
                        props.getDataList()
                    } else {
                        message.warning(Msg)
                    }
                } catch (error) {
                    message.error("服务器异常!")
                }
            }
        })
    }
    const handleEdit = () => {
        if (idList.value.length == 0) {
            message.warning("至多至少勾选一项，请重新勾选!")
            return
        }

        if (idList.value.length > 1) {
            message.warning("至多勾选一项，已勾选" + idList.value.length + '项，请重新勾选!')
            return
        }
        editForm.value.openForm(idList.value[0])
    }
    const handleExport = async () => {
        try {
            const {
                Success,
                Data,
                Msg
            } = await http.post("/%areaName%/%entityName%/ExPort", {
                PageIndex: 1, PageRows: 9999,
                sSortField: sorter.value.field,
                SortType: sorter.value.order,
            })
            message.loading({ content: '处理中...', key: 'updatable' });
            if (Success) {
                let elink = document.createElement('a')
                elink.href = url + Data
                elink.setAttribute('download', '导出')
                elink.style.display = 'none'
                document.body.appendChild(elink)
                setTimeout(() => {
                    elink.click()
                    document.body.removeChild(elink)
                    message.success({ content: '导出成功,请查看!', duration: 2, key: 'updatable' })
                }, 66)
            } else {
                message.error({ content: '导出失败,Error:' + Msg, duration: 2, key: 'updatable' })
            }
        } catch (error) {
            message.error("服务器异常!")
        }
    }
    const handleIsOpen = () => {
        if (isOpenSearch.value) {
            handleReset()
        }
        isOpenSearch.value = !isOpenSearch.value
    }
    const tableSett = ref()
    const handleIsTable = () => {
        tableSett.value.openItem()
    }
    // 查询
    const emit = defineEmits(['searchOption'])
    const handleSearch = () => {
        let option = { ...form.value }
        searchList.value.map((item) => {
            if (item.e_type == 'date') {
                if (form.value[item.key]) {
                    option[item.key] = moment(form.value[item.key]).format("YYYY-MM-DD")
                }
            }
        })
        emit('searchOption', option, search.value)
    }
    // 重置
    const handleReset = () => {
        form.value = {}
        nextTick(() => {
            formRef.value.resetFields()
        })
    }

</script>